import React from "react";
import { Typography, Button, Space, Card } from "antd";
import { useNavigate } from "react-router-dom";
import styles from "./WelcomePage.module.less";
import Icon from "../../utils/icons";

const { Title, Paragraph } = Typography;

const WelcomePage: React.FC = () => {
  const navigate = useNavigate();

  // 快速导航按钮
  const quickNavButtons = [
    {
      title: "创建新应用",
      icon: "Circleplus",
      description: "从头创建一个全新的智能应用",
      path: "/create",
      type: "primary",
    },
    {
      title: "浏览模板",
      icon: "Market",
      description: "使用预设模板快速启动您的项目",
      path: "/market",
      type: "default",
    },
    {
      title: "管理空间",
      icon: "Space",
      description: "查看和管理您的应用空间",
      path: "/space",
      type: "default",
    },
  ];

  return (
    <div className={styles.welcomeContainer}>
      <div className={styles.welcomeHeader}>
        <div className={styles.logoSection}>
          <Icon name="Logo" className={styles.logo} width={64} height={64} />
          <Title className={styles.welcomeTitle}>欢迎使用智能应用平台</Title>
        </div>
        <Paragraph className={styles.welcomeSubtitle}>
          快速构建、部署和管理您的智能应用
        </Paragraph>
      </div>

      <div className={styles.cardsContainer}>
        {quickNavButtons.map((button, index) => (
          <Card key={index} className={styles.navCard} hoverable>
            <div
              className={styles.cardContent}
              onClick={() => navigate(button.path)}
            >
              <div className={styles.iconWrapper}>
                <Icon name={button.icon} width={32} height={32} />
              </div>
              <div className={styles.cardText}>
                <Title level={4}>{button.title}</Title>
                <Paragraph>{button.description}</Paragraph>
              </div>
              <Button
                type={button.type as any}
                size="large"
                className={styles.cardButton}
              >
                开始
              </Button>
            </div>
          </Card>
        ))}
      </div>

      <div className={styles.recentSection}>
        <Title level={3}>最近使用的应用</Title>
        <div className={styles.emptyState}>
          <Icon
            name="NoApp"
            className={styles.emptyIcon}
            width={120}
            height={120}
          />
          <Paragraph>您还没有创建任何应用</Paragraph>
          <Button
            type="primary"
            size="large"
            onClick={() => navigate("/create")}
          >
            创建第一个应用
          </Button>
        </div>
      </div>

      <div className={styles.featuresSection}>
        <Title level={3}>平台特性</Title>
        <div className={styles.featuresList}>
          <Card className={styles.featureCard}>
            <Title level={4}>智能对话</Title>
            <Paragraph>利用先进的AI技术构建智能对话应用</Paragraph>
          </Card>
          <Card className={styles.featureCard}>
            <Title level={4}>数据分析</Title>
            <Paragraph>强大的数据处理和可视化能力</Paragraph>
          </Card>
          <Card className={styles.featureCard}>
            <Title level={4}>工作流自动化</Title>
            <Paragraph>自定义工作流程，提高工作效率</Paragraph>
          </Card>
        </div>
      </div>
    </div>
  );
};

export default WelcomePage;
